Űrlapmezők létrehozása

Kapcsolómezők definiálása - jelölőnégyzet

Többször van arra szükség, hogy a felhasználó ne beírja, csupán egy megadott halmazból kiválassza a szükséges értéket. Ilyen pl. a felhasználó neme (férfi/nő), vagy a születési hónapok, napok listája, de akár ide sorolhatjuk a kedvenc ételek listáját is. Ezeket az objektumokat akkor alkalmazzuk, ha nem engedhetjük meg a kliensnek, hogy szabadon, bármit bevihessen. Példa, hogy jobban megértsd:

A felhasználó lakhely adatait szeretnéd tárolni, majd ezek alapján szűrni. Ha szövegbeviteli mezőt alkalmazol a városnak, abból kalamajka születhet. Hányféleképpen lehet írni Budapest nevét? Budapest, BUDAPEST, budapest, bp., bp, BP, ... Tovább nem sorolom. S még nem gondoltunk arra, hogy ha elírja: Butapest? ;-) Látható, hogy ha "bolondbiztos" bevitelt szeretnénk megvalósítani (s mindig erre kell törekedjünk!), akkor nem engedhetjük meg a felhasználónak, hogy ő maga írja be. Inkább szenvedjünk meg vele, hogy felvisszük a összes magyarországi települést egy adatbázisba, de ha a szűrés miatt fontos a város, akkor ne hezitáljunk. Amennyiben természetesen nem fogunk a város alapján szűrni, akkor nem nem lényeges.
Hasonló gondot okozhat a születési dátum felvitele. Ahány felhasználó, annyi féle módon fogja bevinni a születési adatait. Ha viszont a hónapot és a napot listából kell kiválasztania, egyszerűbb dolgunk lesz a feldolgozás során.

A kapcsolómezőknek első típusa a checkbox, amely a Windows jelölőnégyzet objektumának felel meg. Lássuk, hogyan kell definiálni és milyen attribútumai vannak.

iDevice ikon checkbox kapcsolómező attribútumai
Használata<INPUT name="etelek" type="checkbox" value="dobostorta" />
nameNem kötelező paraméter, de érdemes megadni, hogy egyértelműen hivatkozhassunk rájuk.
typeA "checkbox" értékkel határozhatjuk meg, hogy jelölőnégyzetet hozunk létre. Az alábbi módon fog kinézni: Próbáld ki- és bekapcsolni!
valueEzt az értéket adja vissza, ha az elem ki van jelölve (pipálva).
checkedEz az attribútum meghatározza, hogy alapértelmezésben a mező ki legyen-e pipálva. Ha szükséges, használata a következő: checked="checked". Több helyen is láthatod majd, hogy a rövid formátumot alkalmazzák (a jobb oldal teljesen lemarad), ez viszont nem szabványos, a HTML 4.01 nem ajánlja, az XHTML pedig már nem is támogatja.

Checkbox-ból többet is elhelyezhetsz egy űrlapon, akkor csak fel kell sorolni őket, érdemes arra vigyázni, hogy minde checkbox elemnek külön neve és értéke legyen. Egy igen egyszerű példa, melyik a kedvenc sütink:

Dobostorta
Franciakrémes
Gyümölcsös szelet


... és a forrás:
<FORM name="sutibevitel" method="GET">
  <INPUT type="checkbox" name="suti1" value="dobos" /> Dobostorta <BR />
  <INPUT type="checkbox" name="suti2" value="kremes" /> Franciakrémes <BR />
  <INPUT type="checkbox" name="suti3" value="gyumolcsos" checked="checked" /> Gyümölcsös szelet <BR />
</FORM>
Figyeld meg az alábbiakat: mindegyik mező külön nevet kapott (suti1, suti2, suti3). Ne használj a névben ékezetes karaktereket vagy egyéb speciális jelet. (pl. szóközt!) A value értékek attól függőek, hogy mit szeretnék visszakapni. Lehetőleg itt se használjunk speciális dolgokat. Egy rövid, egyszerű utalás éppen megteszi. A checkbox után írtam a szöveget - ez az általános módszer. Természetesen akár a négyzet elé is tehettem volna a feliratot, de az nem olyan szép. Gondolom egyértelmű, hogy maga a felirat nem tartozik közvetlenül a jelölőnégyzethez, egy képet is beilleszthettem volna helyette, de el is hagyhattam volna. S végül a checked paramétert láthatod, ami meghatározta, hogy az utolsó opció be legyen kapcsolva.

De mi lesz a visszadott értékekkel? Nagyon jó kérdés! A HTML csak azokat az értékeket adja vissza, amelyek be lettek jelölve. Így ha az első és az utolsó mezőt pipáljuk, a visszaadott érték az alábbi módon néz ki:
suti1=dobos
suti3=gyumolcsos
Látható, hogy a suti2 egyszerűen elmarad. Most látszik igazán, hogy a név miért nem egyforma: ha mindegyik mező neve pl. suti lenne, akkor három darab suti változó jönne létre, ami nem lehetséges, csak az utolsó lenne érvényes, mivel az előzőeket egyszerűen felülírná. (Gondold csak meg: legyen az x értéke 3, majd legyen az x értéke 4, és végül legyen az x értéke 5. Mennyi is most az x értéke? Ha jól figyeltél, akkor bizony 5!)

iDevice ikon Gondolkodjunk együtt!

Egyre bonyolódik az űrlapok kezelése, hiszen egyre több objektumot tudunk készíteni. Ennek örömére tervezz egy olyan űrlapot, amelyik tartalmazza a megkérdezett nevét, s hogy a felsoroltak közül melyik újságot szokta olvasni!